<template>
	<view class="glob">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in data">
				<img :src="item.imageUrl" style="width:100%" alt="" />
			</swiper-item>

		</swiper>
		<view class="kc">
			<view class="">
				热门课程
			</view>
			<view class="" @click="moresubject">
				更多课程>
			</view>
		</view>
		<view class="sublist">
			<view class="sub" v-for="item in courseList" @click="kcdetail(item)">
				<view class="subtop">
					<image :src="item.cover" class="cover" mode=""></image>
					<view class="xuexi">
						<image src="../../static/xuexinum.png" mode=""></image>
						{{item.viewCount}}次学习
					</view>
				</view>
				<view class="subbottom">
					<view class="subname">
						{{item.title}}
					</view>
					<view class="subh">
						<view class="price" style="color: #4db5fb;">
							￥{{item.price}}
						</view>
						<view class="goumai">
							{{item.buyCount}}购买
						</view>

					</view>
				</view>

			</view>
		</view>
		<view class="kc">
			<view class="">
				名师大咖
			</view>
			<view class="" @click="moreteacher">
				更多名师>
			</view>
		</view>
		<view class="sublist">
			<view class="sub" v-for="item in teacher" @click="teacherdetail(item)">
				<view class="subtop1">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="subbottom">
					<view class="subjj">
						{{item.intro}}
					</view>
					<view class="price" style="color: #4db5fb;">
						{{item.name}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import
	instance

	from "../../request.js"
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	const courseList = ref([]);
	const teacher=ref([]);
	const data = ref([]);
	const getbanner = async () => {
		console.log(112)
		const res = await instance.get("/api/cms/banner");
		console.log(res)
		data.value = res.data.bannerList
	}
	const getlist = async () => {
		const res = await instance.get("/api/edu/index");
		console.log(res, "名师大咖")
		courseList.value = res.data.courseList
teacher.value=res.data.teacherList
	}
	const moresubject=()=>{
		uni.switchTab({
			url:"/pages/kecheng/kecheng"
		})
	}
	const moreteacher=()=>{
		uni.navigateTo({
			url:"/pages/moreteacher/moreteacher"
		})
	}
	const teacherdetail=(item)=>{
		uni.navigateTo({
			url:`/pages/teacherdetail/teacherdetail?id=${item.id}`
		})
	}
	const kcdetail=(item)=>{
		uni.navigateTo({
			url:`/pages/kcdetail/kcdetail?id=${item.id}`
		})
	}
	onMounted(() => {
		getbanner()
		getlist()
	})
</script>

<style>
	.goumai {
		color: #888;
		font-size: 12px;
	}

	.subh {
		width: 100%;
		margin-top: 15px;
		display: flex;
		justify-content: space-between;
	}
.subjj{
	font-size: 12px;
	color: #888;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp:2 ;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;

}
	.subname {
		font-size: 12px;
	}

	.subbottom {
		width: 100%;
		height: auto;
		padding: 10px 5px;
		box-sizing: border-box;
		background: #fff;
	}

	.sub:nth-child(2n) {
		margin-right: 0px !important;
	}

	.subtop {
		width: 100%;
		height: 260rpx;
		position: relative;
	}
.subtop1{
	width: 100%;
	height: 204px;
}
.subtop1 image{
	width: 100%;
	height: 100%;
}
	.xuexi image {
		width: 20px;
		height: 20px;
		vertical-align: middle;
	}

	.xuexi {
		padding: 4px 6px;
		box-sizing: border-box;
		position: absolute;
		color: #fff;
		font-size: 12px;
		bottom: 0px;
		right: 0px;
		background-color: rgba(78, 52, 37, 0.2);
		border-radius: 20px;
	}

	.subtop .cover {
		width: 100%;
		height: 100%;
	}

	.sublist {
		width: 100%;
		height: auto;
		padding: 0px 10px;
		margin-top: 10px;
		overflow: hidden;
		box-sizing: border-box;

	}

	.sub {
		width: 48%;
		height: auto;

		box-sizing: border-box;
		background: #ffff;
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;

	}

	page {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.glob {
		width: 100%;
		height: 100%;
		background: rgba(239, 239, 239, 0.6901960784);
	}

	.kc {

		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
		padding: 0px 20px;
		font-size: 14px;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>